<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <title>版本列表</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('版本管理','版本管理')"></div>
</div>

<div th:fragment="content" th:remove="tag">


    <div class="row">
        <div class="col-xs-12">

                <form role="form" id="queryForm" th:action="@{/version/list}" method="post" >
                </form>


            <div class="box">
                <div class="box-body">
                    <table id="dataTable" class="table table-striped table-bordered table-hover table-condensed">

                        <thead >
                        <tr>
                            <th>app标识</th>
                            <th>版本</th>
                            <th>更新地址</th>
                            <th>升级类型</th>
                            <th>备注</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                    <!--<div th:include="model/page :: pager" th:remove="tag"></div>-->
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
    <!--编辑-->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header" style="background-color: #307095;">
                    <button type="button" id="btn_close" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel2">信息-编辑</h4>
                </div>

                <div class="modal-body">
                    <form class="form-horizontal"  id="editForm"  method="post">
                        <input type="hidden" class="form-control" name="id"/>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">app标识</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="appId"
                                      />
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">版本</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="version"
                                />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">更新地址</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="apkUrl"
                                       />
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">升级类型</label>
                            <div class="col-sm-9">
                                <label><input name="type" id="choice1" type="radio" value="1" />选择升级</label>
                            </div>
                            <label  class="col-sm-3 control-label"></label>
                            <div class="col-sm-9">
                                <label><input name="type"  id="choice2" type="radio" value="2" />强制升级</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">备注</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="comment"
                                />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="btn-submit" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- DataTables -->

    <script>

        $(function (){
            var tables = $("#dataTable").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                /*pagingType: "full_numbers",*/
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/version/list",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": 'appId'},
                    {"data": 'version'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                    {"data": 'apkUrl'},
                    {"data": 'type',
                        "render":function(data,type,full,callback) {
                            if(data=='1')
                                return /*<![CDATA[*/"<span>选择升级</span>"/*]]>*/;
                            else return /*<![CDATA[*/"<span>强制升级</span>"/*]]>*/;
                        }
                    },
                    {"data": 'comment', defaultContent: ""},
                    {"data": 'createTimeStr', defaultContent: ""},
                    {"data": null,"width":"160px"}

                ],

                /*<![CDATA[*/
                columnDefs: [
                    {
                        targets: -1,//编辑
                        data: null,//下面这行，添加了编辑按钮和，删除按钮
                        defaultContent: "<div class='btn-group'><button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>编辑</button>" +
                        "<button id='delRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-trash-o'></i>删除</button></div>"
                    }
                ],
                dom: '<"toolbar">frtip',
                /*]]>*/

                //每加载完一行的回调函数
                createdRow: function( row, data, index ) {
                    //修改单元格样式
                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                },
                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },

                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }

            });

            /*<![CDATA[*/
            $("div.toolbar").html('<button type="button" class="btn btn-primary btn-sm" id="btn-add">新增</button>');

            /*]]>*/

            //查询按钮
            $("#btn-query").on("click", function () {
                tables.fnDraw();
            });

            //添加
            $("#btn-add").on("click", function () {
                $("#editModal input[name=id]").val(null);
                $("#editModal input[name=appId]").val('');
                $("#editModal input[name=apkUrl]").val('');
                $("#editModal input[name=version]").val('');
                $("#choice1").removeAttr("checked");
                $("#choice2").removeAttr("checked");
                $("#myModalLabel2").text("信息-新增");
                $("#editModal").modal("show");

            });
            $("#btn_close").click(function () {
                $("#editModal").css('display','none');
                $("#choice1").removeAttr("checked");
                $("#choice2").removeAttr("checked");
            })

            $('#editModal').on('hide.bs.modal', function () {
                $("#editModal").css('display','none');
                $("#choice1").removeAttr("checked");
                $("#choice2").removeAttr("checked");
            });

            //修改
            $("#dataTable tbody").on("click", "#editRow", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                $("#editModal input[name=id]").val(data.id);
                $("#editModal input[name=appId]").val(data.appId);
                $("#editModal input[name=apkUrl]").val(data.apkUrl);
                $("#editModal input[name=version]").val(data.version);
                if(data.type == "1"){
                    $("#choice1").prop("checked",true);
                    $("#choice2").prop("checked",false);
                }else {
                    $("#choice2").prop("checked",true);
                    $("#choice1").prop("checked",false);
                }
                $("#editModal").modal("show");
            });
            var validater = $("#editForm").validate();
            //修改
            $("#btn-submit").on("click", function(){
                if(validater.form()) {
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: '/version/edit',
                        data: $("#editForm").serialize(),
                        dataType: "json",
                        async: false,
                        error: function (request) {
                            toastr.error("网络错误...");
                        },
                        success: function (data) {
                            //   data = $.parseJSON(data);
                            if (data.result == "200") {
                                $("#editModal").modal("hide");
                                tables.fnDraw();
                                toastr.success(data.msg);
                            } else {
                                toastr.error(data.msg);
                            }
                        }
                    });
                }
            });
            //删除
            $("#dataTable tbody").on("click", "#delRow", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                bootbox.confirm(
                    {
                        message: "确认要删除吗",
                        buttons: {
                            confirm: {
                                label: '确认'
                            },
                            cancel: {
                                label: '取消'
                            }
                        },
                        callback: function (result) {
                            // 返回 true  或者false
                            if (result) {
                                $.ajax({
                                    url:'/version/delete',
                                    type:'POST',
                                    data:{"id":data.id},
                                    dataType: "json",
                                    cache: "false",
                                    success:function(result){
                                        if(result.result == 200){
                                            toastr.success(result.msg);
                                            tables.api().row().remove().draw(false);
                                        }else{
                                            toastr.error(result.msg);
                                        }
                                    },
                                    error:function(err){
                                        toastr.error("网络错误...");
                                    }
                                });
                            }
                        }
                    });


            });

        })



    </script>


</div>
</body>
</html>
